<template>
  <el-container>
    <el-main>
      <!-- 增加logo图标 -->
    <div class="logo_img"></div>
    <div class="login-box">
      <el-row style="border-bottom:1px solid #ccc;margin-bottom: 20px;">
        <el-col :span="12"><div :class="['login-title',is_company ? 'login-title-active' : '']" @click="is_company=1">员工登录</div></el-col>
        <el-col :span="12"><div :class="['login-title',!is_company ? 'login-title-active' : '']" @click="is_company=0">供应商登录</div></el-col>
      </el-row>
      <div class="login-content " style="flex-direction:column ;justify-content:space-between;align-content: center;display: flex;">
        <!-- 账号 -->
        <el-input placeholder="请输入账号" v-model="userinfo.account" prefix-icon="el-icon-user" @blur="getPwd">
        </el-input>
        <!-- 密码 -->
         <el-input placeholder="请输入密码" v-model="userinfo.password" show-password prefix-icon="el-icon-lock">
        </el-input>

        <div style="justify-content: flex-end;display: flex;align-content: center;align-items: center;padding: 5px;">
          <el-checkbox v-model="checked" class="sc" style="font-size: 12px;margin-right: 5px;" @change="storagePwd">记住密码</el-checkbox>
          <el-checkbox v-model="dialogFormVisible" class="sc" style="font-size: 12px;margin-right: 5px;" @change="dialogFormVisible = true">忘记密码</el-checkbox>
        </div>

        <!-- 登录 -->
        <div class="btn" @click="login">登录</div>
        <div class="btn" @click="dialogRegisterVisible=true" v-if="!is_company">注册</div>
      </div>
    </div>
    <!--      弹窗-->

    <el-dialog title="忘记密码" :visible.sync="dialogFormVisible">
      <el-form :model="userinfo" ref="userinfo" label-width="80px">
        <el-form-item label="账号" prop="account"><el-input  v-model="userinfo.account" placeholder="输入账号" class="w300" disabled></el-input></el-form-item>
        <el-form-item label="密码" prop="password"><el-input v-model="userinfo.password" placeholder="输入密码" class="w300" show-password></el-input></el-form-item>
        <el-form-item label="确认密码" prop="repeatPassword"><el-input v-model="userinfo.repeatPassword" placeholder="输入确认密码" class="w300" show-password></el-input></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editUserinfo">立即修改</el-button>
          <el-button type="info" @click="cancelForm('userinfo')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

<!--    注册弹窗-->
    <el-dialog title="注册供应商" :visible.sync="dialogRegisterVisible">
      <el-form :model="support" ref="support" label-width="80px">
        <el-form-item label="公司名称" prop="company"><el-input  v-model="support.company" placeholder="输入公司名称" class="w300"></el-input></el-form-item>
        <el-form-item label="法人" prop="username"><el-input  v-model="support.username" placeholder="输入法人" class="w300" ></el-input></el-form-item>
        <el-form-item label="经营地址" prop="address"><el-input  v-model="support.address" placeholder="输入经营地址" class="w300" ></el-input></el-form-item>
        <el-form-item label="邮箱" prop="email"><el-input  v-model="support.email" placeholder="输入邮箱" class="w300" ></el-input></el-form-item>
        <el-form-item label="用户名" prop="account"><el-input  v-model="support.account" placeholder="输入用户名" class="w300" ></el-input></el-form-item>
        <el-form-item label="联系电话" prop="phone"><el-input  v-model="support.phone" placeholder="输入联系电话" class="w300" autocomplete="off" type="number" maxlength="11"></el-input></el-form-item>
        <el-form-item label="密码" prop="password"><el-input v-model="support.password" placeholder="输入密码" class="w300" show-password autocomplete="off"></el-input></el-form-item>
        <el-form-item label="确认密码" prop="repeatPassword"><el-input v-model="support.repeatPassword" placeholder="输入确认密码" class="w300" show-password></el-input></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="registerSuport">立即注冊</el-button>
          <el-button type="info" @click="cancelForm('support')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    </el-main>
  </el-container>

</template>

<script>
import captcha from '@/components/common/captcha'
import {checkLogin,register,resetPwd} from '@/apilist/login'
import {editStaffMsg} from "@/apilist/Personnel";
export default {
  name: 'login',
  data () {
    return {
      title:'Login',
      account:'',
      password:'',
      verifycode:'',
      identifyCodes: '1234567890',
      identifyCode: '',
      is_company: 1,
      userinfo: {
          account: '',
          password: '',
          repeatPassword: '',
      },
      dialogFormVisible: false,
      checked: true,
      dialogRegisterVisible: false,
      //供应商
      support: {
          company: '',
          username: '',
          address: '',
          email: '',
          account: '',
          phone: '',
          password: '',
          repeatPassword: '',
      },
    }
  },
  components:{captcha},
  methods:{
     // 生成随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4);
      console.log(this.identifyCode);
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
    },

      //登录
      login(){

          let postdata = {
              'account':this.userinfo.account,
              'password':this.userinfo.password,
              'is_company': this.is_company,
          };
          checkLogin(postdata).then(res=>{
              let userinfo = JSON.stringify(res.data)
              sessionStorage.setItem('userinfo',userinfo)
              if(this.checked) sessionStorage.setItem(this.userinfo.account,this.userinfo.password);
              if(this.is_company){
                this.$router.push('/change_position')
              }else{
                this.$router.push('/home')
              }
          });
      },

      editUserinfo(){
        resetPwd(this.userinfo).then(res => {
              this.$message({
                  type: 'success',
                  message: res.msg,
                  onClose: ()=>{
                    sessionStorage.setItem(this.userinfo.account,this.userinfo.password);
                    this.dialogFormVisible = false
                  }
              })
          })
      },
      cancelForm(form){
          this.$refs[form].resetFields()
          this.dialogFormVisible = false
          this.dialogRegisterVisible = false
      },

      registerSuport(){
          register(this.support).then(res => {
              if(res.state == 'ok'){
                  this.$message({
                      type: 'success',
                      message: res.msg,
                      onClose: ()=>{
                        this.dialogRegisterVisible = false
                      }
                  })
              }
          });
      },

      //记住密码
      storagePwd(){
        if(this.checked) {
          if (this.userinfo.account && this.userinfo.password) {
            sessionStorage.setItem(this.userinfo.account, this.userinfo.password)
          }
        }
      },
      //获取密码
      getPwd(){
        if(this.userinfo.account)this.userinfo.password = sessionStorage.getItem(this.userinfo.account);
      }
  },
  mounted() {
      this.getPwd()
  }
}
</script>

<style scoped>
@import '../../../static/css/login_bg.css';
.logo_img{
  width: 500px;
  height: 60px;
  transform: translate(-46%,160%);
  margin:auto;position: absolute;
  left:50%;top:50%;
  text-align: center;
  background-image: url('../../../static/img/vito01.png');
  background-size: 90% 90%;
  background-repeat: no-repeat;
  border-radius: 5px 5px;
}

</style>
